<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>画布的使用</title>
	</head>
	<body>
		<canvas id="mycanvas" width="800" height="600"></canvas>
		<script>
			var c = document.getElementById("mycanvas");
			var cxt = c.getContext("2d");
			cxt.fillStyle = "#ff0000";
			//变画矩形变填充
			cxt.fillRect(0,0,150,75);
			// 开放新的路径
			cxt.beginPath();
			cxt.fillStyle = "#00ff00";
			//画个圆的路径
			cxt.arc(70,18,15,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
			//渐变
			cxt.beginPath();
			var grd = cxt.createLinearGradient(0,0,170,0);
			grd.addColorStop(0,"#ff0000")
			grd.addColorStop(1,"#00ff00")
			cxt.fillStyle = grd;
			cxt.fillRect(0,80,170,75);
			cxt.closePath();
			//画线
			cxt.beginPath();
			cxt.moveTo(10,100);
			cxt.lineTo(150,150);
			cxt.lineTo(10,150);
			cxt.strokeStyle = "#0000ff";
			cxt.stroke();
			cxt.closePath();
		</script>
	</body>
</html>